<template>
    <div class="paddingTop">
        <el-row>
            <el-col :span="2">
                <el-button type="primary" @click="addStaffBtn" size="medium">新增员工</el-button>
            </el-col>
            <el-col :span="22">
                <selectStaffBtn></selectStaffBtn>   <!--查询组件-->
            </el-col>
        </el-row>
        <!--新增员工弹出框-->
        <el-dialog title="新增员工" :visible.sync="dialogFormVisible" width="600px" center :close-on-click-modal = 'false'>
            <el-form :rules='addStaffRules' :model="newStaffData" ref="newStaffData">
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="newStaffData.name" autocomplete="off" placeholder="请输入员工姓名" style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                    <el-input v-model="newStaffData.password" autocomplete="off" placeholder="请输入员工密码" style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item label="员工编号" :label-width="formLabelWidth" prop="number">
                    <el-input v-model="newStaffData.number" autocomplete="off" placeholder="请输入员工编号" style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                    <el-radio-group v-model="newStaffData.sex"  style="width: 75%">
                        <el-radio label="男" value="1" checked></el-radio>
                        <el-radio label="女" value="2"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth" prop="idCard">
                    <el-input v-model="newStaffData.idCard" autocomplete="off" placeholder="请输入身份证号" style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth" prop="tel">
                    <el-input v-model="newStaffData.tel" autocomplete="off" placeholder="请输入联系电话" style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth" prop="storeId">
                    <el-select v-model="newStaffData.storeId" placeholder="请选择部门" style="width: 75%">
                        <el-option v-for="item in storeData" :key="item.storeId" :label="item.name" :value="item.storeId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth" prop="jobId">
                    <el-select v-model="newStaffData.jobId" placeholder="请选择职位" style="width: 75%">
                        <el-option v-for="item in jobData" :key="item.jobId" :label="item.name" :value="item.jobId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工资" :label-width="formLabelWidth" prop="baseSalary">
                    <el-input v-model="newStaffData.baseSalary" autocomplete="off" placeholder="请输入员工工资" style="width: 75%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="toAddStaff('newStaffData')">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import selectStaffBtn from "./selectStaffBtn";
    export default {
        name: "addStaffBtn",
        components:{
            selectStaffBtn
        },
        data(){
            //验证员工名称
            let YZ_name = (rule, value, callback)=>{
                if (value === '' || value === undefined) {
                    callback(new Error('请输入员工名称'));
                }else {
                    if(!(this.newNameState)){
                        callback('员工名称已存在');
                    }
                    callback();
                }
            };
            //验证员工密码
            let YZ_password = (rule, value, callback)=>{
                if (value === '' || value === undefined) {
                    callback(new Error('请输入密码'));
                }
                callback();
            };
            //验证员工编号
            let YZ_number = (rule, value, callback)=>{
                if (value === '' || value === undefined) {
                    callback(new Error('请输入员工编号'));
                }
                callback();
            };
            //验证身份证
            let YZ_IDCard = (rule, value, callback) => {
                if (value === '' || value === undefined) {
                    callback(new Error('请输入身份证号'));
                } else {
                    /*if (!(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value))) {
                        callback(new Error('身份证号输入错误'));
                    }*/
                    callback();
                }
            };
            //验证联系电话
            let YZ_Tel = (rule, value, callback) => {
                if (value === '' || value === undefined) {
                    callback(new Error('请输入联系电话'));
                } else {
                    /*if (!(/^1[3456789]\d{9}$/.test(value))) {
                        callback(new Error('联系电话输入错误'));
                    }*/
                    callback();
                }
            };
            //验证工资
            let YZ_base_salary = (rule, value, callback) => {
                if (value === '' || value === undefined) {
                    callback(new Error('请输入员工工资'));
                } else {
                    if (!(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value))) {
                        callback(new Error('工资输入错误'));
                    }
                    callback();
                }
            };
            return{
                //-----------------新增员工部分-----------------
                dialogFormVisible:false,   //新增员工弹窗的显示状态
                addStaffRules:{    //新增员工表单验证规则
                    name:[{validator:YZ_name,trigger:'blur'}],  //验证员工名称
                    password:[{validator:YZ_password,trigger:'blur'}],  //验证密码
                    number:[{validator:YZ_number,trigger:'blur'}],  //验证员工编号
                    idCard:[{validator:YZ_IDCard,trigger:'blur'}],  //验证员工身份证号
                    tel:[{validator:YZ_Tel,trigger:'blur'}],  //验证员工联系电话
                    baseSalary:[{validator:YZ_base_salary,trigger:'blur'}],  //验证员工工资

                },
                newNameState:true,     //新增员工名字是否可以注册
                newStaffData:{sex:'男'},    //新增员工的信息
                formLabelWidth:'25%',   //新增员工弹窗label的宽度
            }
        },
        computed:{
            storeData(){    //部门信息
                let allStore=this.$store.state.staffInformationStore.foundAllStore;
                return allStore;
            },
            jobData(){    //职位信息
                let allJob=this.$store.state.staffInformationStore.foundAllJob;
                return allJob;
            },
        },
        watch:{
            'newStaffData.name':function () {    //员工姓名发生变化，改变状态
                this.checkNewStaffName();
            }
        },
        methods:{
            ...mapActions(['isTrueStaffName','addNewStaff','userOperation','selectStore','selectJob','showStaffInfo','changeCurrentPage']),
            //用户操作日志
            staffOperetion(){
                let operation = {//用户操作
                    userName:this.$store.state.user.userName,//用户名
                    operationDate:this.$store.state.nowTime.time,//用户操作时间
                    operationMessage:`新增员工（${this.newStaffData.name}）`,//用户操作内容
                };
                this.userOperation(operation)//需要在操作完成后，调用处理用户操作的函数
            },
            //刷新表格
            tableStaffInfo(){
                this.showStaffInfo({"pageCount":parseInt(this.$store.state.staffInformationStore.pages.currentPage), "pageSize": 5}).then(res=>{
                    if (res.code!==200){
                        // console.log(res);
                        this.$message({
                            type: 'error',
                            message: '员工信息加载失败'
                        });
                    }
                });
            },
            //点击“新增”按钮
            addStaffBtn(){
                // console.log(this.$store.state.staffInformationStore.foundAllStore);
                this.newStaffData={sex:'男'};   //点击清空上次的
                this.dialogFormVisible=true;
            },
            //验证会员名是否已存在
            checkNewStaffName(){
                this.isTrueStaffName({name:this.newStaffData.name}).then(res=>{
                    res.code===200 ? this.newNameState=true : this.newNameState=false;
                });
            },
            //点击新增员工弹窗“提交”按钮
            toAddStaff(formName){
                this.$refs[formName].validate((valid) => {
                    if(valid){     //表单输入全部验证通过
                        this.newStaffData.createBy=this.$store.state.user.userName;  //创建人
                        // this.newStaffData.createTime=this.$store.state.nowTime.time;  //创建时间
                        this.addNewStaff(this.newStaffData).then(res=>{
                            if (res.code===200){
                                this.$message({
                                    type: 'success',
                                    message: '新增成功！'
                                });
                                this.staffOperetion(); //新增成功，记录操作日志
                                this.dialogFormVisible=false;   //关闭新增窗口
                                // this.changeCurrentPage({currentPage:this.$store.state.staffInformationStore.foundStaffData.totalPage});    //刷新表格至最后一页
                                this.tableStaffInfo();    //跳转至最后一页
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '新增失败！'
                                });
                            }
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '请输入正确的员工信息'
                        });
                        return false;
                    }
                });
            }
        },
        created() {
            this.selectStore();   //获取所有部门
            this.selectJob();   //获取所有职位
        }
    }
</script>

<style scoped>
    .paddingTop{
        padding-top: 20px;
    }
</style>